<template>
	<div>
	<div class="tab-1">
	   <div class="tab-2">
		   <span>{{tuijian}}</span><span class="tab-3"><span>{{ershou}}</span><span class="tab-4">{{zufang}}</span></span>
		</div>
	  <div class="shop-1" v-for="(item,index) in model5">
		  <router-link to="details/detail">
			<div class="shop-2"><img :src="item.imgSrc" /></div>
		  </router-link>
		  <div class="shop-3">
			  <div class="list1">{{item.title}}</div>
			  <div class="list2">{{item.xiangqing}}</div>
			  <div class="list3">
				 <div class="list3-1">{{item.dateTime}}</div>
				 <div class="list3-2">{{item.look}}</div>
			  </div>
			  <div class="list4"><span class="list4-1">{{item.price}}万元</span><span class="list4-2">{{item.place}}元/m²</span></div>
		  </div>
		
	  </div>
	  <div class="dibu">
		  <div class="dibu-1">{{dibu}}</div>
	  </div>
	</div>
	
	</div>
</template>
<script>
	export default{
		name: 'shoplist',
		props: ["model5"],
		data(){
			return{
				tuijian:"为您推荐",
				ershou:"二手房",
				zufang:"租房",
				dibu:"查看全部二手房源"
				  }
		     }
	}
</script>
  
<style scoped>
	.tab-1{
		width: 7.5rem;
		height: auto;
	}
   .tab-2{
	   width: 7.5rem;
	   height: 0.98rem;
	   line-height: 0.98rem;
	   background: white;
	   padding: 0.2rem;
	   color: black;
   }
	.tab-3{
		display: block;
		width: 3rem;
		height: 0.88rem;
		float: right;
	}
	.tab-3>span{
		color: gray;
		font-size:12px;
		marger-left:0.2rem;	
		padding:0rem 0.4rem;
	}
	.shop-1{
		width: 7.5rem;
		height: 2rem;
		margin-top: 0.6rem;
		display: flex;
	}
	.shop-2{
		width: 2.31rem;
		height: 2rem;
		padding: 0rem 0.2rem;
	}
	.shop-2>img{
		width: 2.31rem;
		height: 2rem;
	}
	.shop-3{
		width: 4.61rem;
		height: 2rem;
		margin-left: 0.5rem;
	}
	.shop-3>div{
		height: 0.51rem;
		width: 4.61rem;
	}
	.list1{
		color: #000000;
		font-size: 14px;
	}
	.list2{
		font-size: 12px;
		color: gray;
	}
	.list3{
		display: flex;
		font-size: 12px;
		color: gray;
	}
	.list4{
		font-size: 14px;
	}
	.list3-1{
	  font-size: 10px;
	  text-align: center;
	  color:#4ed6e4;
	  width: 1.2rem;
      height: 0.34rem;
	  background: #e1f5f8;
	  border-radius: 0.05rem;
	}
	.list3-2{
	  font-size: 10px;
	  text-align: center;
	  color:#74d5ae;
	  width: 1.2rem;
	  height: 0.34rem;
	  background: #c3ecdc;
	  margin-left: 0.2rem;
	  border-radius: 0.05rem;
	}
	.list4-1{
		color:red;
	}
	.list4-2{
		color:gray;
		padding:0rem 0.2rem;
	}
	.dibu{
		margin-top: 0.4rem;
		width: 7.5rem;
		height: 3rem;
		padding: 0.4rem 0.55rem;
	}
	.dibu-1{
		width: 6.18rem;
		height:0.97rem ;
		background:#bbf1c5 ;
		line-height: 0.97rem;
		text-align: center;
		color: #07b868;
	}
</style>
